<template>
  <div>
    <cinema-single v-model="infoList.cinemaData"></cinema-single>
    <div class="tr mr">
      <el-button class="mb20" type="primary" @click="handleAdd">添加</el-button>
    </div>
    <div class="SetPriceTableItemsHandle">
      <Collapse v-for="(item,index) in infoList.rule" :key="index" v-model="activeNames">
        <CollapseItem :name="index">
          <div slot="title" class="flex1">
            <div class="m-collapse-title ">
              <div class="flex1">
                <span>
                  {{'规则'+ (index + 1)}}
                </span>
              </div>
              <div class="mr20">
                <!-- <i class="el-icon-rank primary fs22 pointer drag-handle mr10"></i> -->
                <i class="el-icon-delete fs20 mr10" :class="infoList.rule.length<=1 ? 'info notAllow' : 'primary pointer'" @click.stop="handelDel(index, infoList.length<=1)"></i>
              </div>
            </div>
          </div>
          <zm-form label-width="150px" :rules="rules" :model="item">
            <zm-form-item label="影片" prop="filmName">
              <zm-input v-model.trim="item.filmName" placeholder="请输入影片名称" class="w300" />
            </zm-form-item>
            <el-form-item label="影厅备注" prop="hallRemark">
              <zm-input type="textarea" v-model="item.hallRemark" placeholder="请填写" :autosize="{ minRows: 3 }" class="w400" />
            </el-form-item>
            <el-form-item label="包场时间" prop="endDate">
              <zm-date-picker :start-date.sync="item.startDate" :end-date.sync="item.endDate" type="datetime" time-part date-class="w200" class="vm" :show-radio="false" size="mini" />
            </el-form-item>
          </zm-form>
        </CollapseItem>
      </Collapse>
    </div>
  </div>
</template>
<script>
import CinemaSingle from '../components/CinemaSingle'
import Sortable from 'sortablejs'
import { Collapse, CollapseItem } from 'element-ui'
import zmDatePicker from '@/components/ZmDatePicker'

export default {
  components: { CinemaSingle, Collapse, CollapseItem, zmDatePicker },
  props: {
    rule: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      activeNames: [0],
      sortable: null,
      cinemaData: {
        relationType: '2',
        relationId: ''
      },
      Collapse,
      CollapseItem,
      rules: {
        filmName: { required: true, message: '请填写', trigger: 'blur' },
        hallRemark: { required: true, message: '请填写', trigger: 'blur' },
        endDate: { required: true, message: '请填写', trigger: 'blur' }
      }
    }
  },
  computed: {
    infoList: {
      get () {
        return this.rule
      },
      set (val) {
        // this.rule = val
      }
    }
  },
  created () {
    this.setSort()
  },
  methods: {
    handleAdd () {
      this.infoList.rule && this.infoList.rule.push({ // 包场规则
        filmName: '',
        hallRemark: '',
        startDate: '',
        endDate: ''
      })
    },
    handelDel (index, flag) {
      if (flag) {
        this.$message.warning('至少存在一个规则')
        return
      }
      this.$confirm('是否确定删除该规则', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.infoList.rule.splice(index, 1)
        this.$nextTick(() => {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        })
      }).catch(() => {

      })
    },
    setSort () {
      if (this.sortable && !this.more) return

      this.$nextTick(() => {
        const el = document.querySelectorAll(
          '.SetPriceTableItemsHandle'
        )[0]
        const that = this

        this.sortable = Sortable.create(el, {
          draggable: '.el-collapse',
          ghostClass: 'sortable-ghost',
          handle: '.drag-handle',
          setData: function (dataTransfer) {
            dataTransfer.setData('Text', '')
          },
          onEnd: async evt => {
            const nIndex = evt.newIndex
            const oIndex = evt.oldIndex
            if (nIndex === oIndex) return
            const $li = el.children[nIndex]
            const $oldLi = el.children[oIndex]
            el.removeChild($li)
            if (nIndex > oIndex) {
              el.insertBefore($li, $oldLi)
            } else {
              el.insertBefore($li, $oldLi.nextSibling)
            }

            const oldList = that.infoList.rule
            const listTemp = oldList.slice(0)
            const targetRow = listTemp.splice(oIndex - 1, 1)[0]
            console.log('targetRow', targetRow)
            that.infoList.rule.splice(oIndex - 1, 1)
            that.infoList.rule.splice(nIndex - 1, 0, targetRow)
          }
        })
      })
    }
  }
}
</script>
<style lang='scss' >
.SetPriceTableItemsHandle {
  .m-collapse-title {
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
    width: 100%;
    display: flex !important;
    justify-content: center;
  }

  .el-collapse {
    border: none !important;
    margin-bottom: 10px !important;
  }

  .el-collapse-item__wrap {
    border-bottom: none;
  }

  .el-collapse-item:last-child {
    border: 1px solid #eee;
    padding: 10px 10px 0px 10px;
    box-sizing: border-box;
  }

  .el-collapse-item__header {
    border: none !important;
  }

  .el-collapse-item__arrow {
    margin-top: -9px !important;
  }
}
</style>
